<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 18:22:06
-->
<template>
<!-- 创建图表容器 容纳图表 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
import {Pie} from '@antv/g2plot'
export default {
  data(){
    return{

    }
  },

  mounted(){
    this.initCharts();
  },

  methods:{
    initCharts(){
      const data = [
        { type: '教育', value: 27 },
        { type: '社保', value: 25 },
        { type: '医疗', value: 18 },
        { type: '文化', value: 15 },
        { type: '公安', value: 10 },
        { type: '卫生', value: 5 },
      ];
      //创建一个饼图实例对象
      let pie = new Pie(this.$refs['root'],{
          appendPadding: 10,
          data,
          angleField: 'value',
          colorField: 'type',
          radius: 0.8,
          label: {
            type: 'outer',
            content: '{name} {percentage}',
          },
          interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
      });
      //渲染
      pie.render();
      
    }
  }
}
</script>